<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>父组件</h1>
        <zi-com></zi-com>
        <f-com></f-com>
    </div>

    <div id="con">
        <h1>我是con组件</h1>
    </div>
    <template id="zi">
      <div>
          <h1>我是局部组件</h1>
          <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
          </ul>
          <sun-com></sun-com>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        // 父组件和子组件的生命周期加载顺序
        // 父组件创建前--父组件创建后--父组件挂载前
        // -- - 子组件创建前--子组件创建后--子组件挂载前--子组件挂载后
        // -- - 父组件挂载后
        var app = new Vue({
                el: "#app",
                data() {
                    return {}
                },
                components: { //局部组件
                    'ziCom': {
                        template: '#zi',
                        data() {
                            return {
                                list: ["德华", "星仔", "鸡仔"]
                            }
                        },
                        components: {
                            'sunCom': {
                                template: `<div><h1>孙子辈组件</h1> </div>`,
                                data() {
                                    return {}
                                }
                            }
                        },
                        methods: {},
                    },
                    'fCom': {
                        template: `<div><h1>f组件</h1></div>`,
                        data() {
                            return {}
                        },
                        beforeCreate() {
                            console.log("子组件创建前")
                        },
                        created() {
                            console.log("子组件创建后")
                        },
                        beforeMount() {
                            console.log("子组件挂载前")
                        },
                        mounted() {
                            console.log("子组件挂载后")
                        },
                    }
                },
                methods: {},
                computed: {},
                watch: {},
                beforeCreate() {
                    console.log("父组件创建前")
                },
                created() {
                    console.log("父组件创建后")
                },
                beforeMount() {
                    console.log("父组件挂载前")
                },
                mounted() {
                    console.log("父组件挂载后")
                },
            })
            // 
        var con = new Vue({
            el: "#con",
            data() {
                return {}
            },
            components: {}
        })
    </script>
</body>

</html>